<template>
	<view class="content">
		<view class="information-title">
			<img src="@/static/img/pay/line.png" alt="">
			<text>评价{{list.length ? list.length : 0}}</text>
		</view>
    <!-- 评价列表 -->
    <view class="my-loading" v-if="loading">
      <u-loading mode="circle" size="36"></u-loading>
    </view>
    <view v-else>
      <view v-if="list.length > 0">
        <view class="comments-row" v-for="(item, index) in list" :key="index">
        	<view class="comments-peo">
        		<img :src="item.imgUrl || defaultImg" alt="" class="header-img">
        		<view class="name-date">
        			<text class="name ellipsis">{{ item.createByName ? item.createByName: '无名'}} {{ index + 1 }}</text>
        			<text class="date">{{ item.createTime }}</text>
        		</view>
        		<!-- <view class="evaluation">
        			<text>{{item.likes.toFixed(1)}}</text>
        			<u-rate :current="item.likes" :disabled="true" active-color="#faad39"></u-rate>
        		</view> -->
        	</view>
        	<view class="comments-text">
        		<text>{{item.details || '--'}}</text>
        	</view>
        	<view class="comments-msg">
        		<view class="msg">
        			<img src="@/static/img/courseBuy/comments.png" alt="" @tap="commentsApplyFn(item, '1')">
        			<text>{{ item.replyNum }}</text>
        		</view>
        		<view class="praise">
        			<img src="@/static/img/courseBuy/praise2.png" alt="" @click="clickLikeFn(item.id)" v-if="index % 2 === 0">
        			<img src="@/static/img/courseBuy/praise.png" alt="" @click="clickLikeFn(item.id)" v-if="index % 2 !== 0">
        			<text>{{ item.likes }}</text>
        		</view>
        	</view>
        </view>
        <u-loadmore :status="status" style="padding-top: 20rpx;" />
      </view>
      <view v-else><u-empty text="暂无评价" mode="list"></u-empty></view>
    </view>
    
    <!-- 回复评论footer -->
    <view class="apply-footer" >
    	<view class="course-comments">
    		<view class="comments-input">
    			<u-input :clearable="false" placeholder="说点儿什么..." maxlength="50" v-model="inputVal" />
    		</view>
    		<view class="search-information">
    			<view class="" style="color: #f73935;" @click="submitCommentFn">发表评价</view>
    		</view>
    	</view>
    </view>
    
    <!-- 回复评论 -->
    <!-- <u-modal class="aaa" v-if="apply.isShow" v-model="apply.isShow" width="100%" style="width: 100%; height: 100vh; background-color: coral; position: fixed; top: 0; left: 0;z-index: 90000;">
      <view style="height: 50vh;">
        123
      </view>
    </u-modal> -->
    <view class="apply-modal">
    	<u-popup class="popup-box" v-model="apply.isShow" @close="applyCloseFn" height="50%" border-radius="14" mode="bottom">
        <scroll-view id="popupscroll" scroll-into-view="popupscroll" scroll-y="true" @scroll="scrollFn" style="height: 100%;">

          <view class="my-loading" v-if="apply.loading">
            <u-loading mode="circle" size="36"></u-loading>
          </view>
          <view v-else>
            <view v-if="apply.list.length > 0" style="padding-top: 20rpx;">
              <text class="apply-num">{{ apply.total }}条回复 {{ apply.name }}</text>
              <view class="mb-60" v-for="(item, index) in apply.list" :key="index">
                <view class="published">
                  <view class="userInformation">
                    <img :src="item.createByFace ? item.createByFace : defaultImg" alt="">
                    <view class="information">
                      <text class="name ellipsis">{{ item.createByName }} {{ index + 1 }}</text>
                      <text class="date">{{ item.createTime }}</text>
                    </view>
                  </view>
                </view>
                <text class="text">{{item.details}}</text>
              </view>
              <u-loadmore :status="apply.status" />
            </view>
            <view v-else style="padding: 20rpx 0;">
              <u-empty text="暂无数据, 来做第一人吧？" mode="list"></u-empty>
            </view>
          </view>
          
        </scroll-view>
    	</u-popup>
    </view>
    
    <!-- 提示框 -->
    <u-toast ref="uToast" duration="1000" back="false" class="common-toast" />
	</view>
</template>

<script>
	import { API } from '@/config/myApi.js';
	export default {
		name: "newsComment",
		props: ['id'],
		data() {
			return {
        // 资讯id
        informationId: "",
        loading: true,
        status: 'loadmore',
        // 评论
        params: {
          page: 1,
          rows: 10
        },
        list: [],
        // 回复
        apply: {
          isShow: false,
          commentId: "",
          list: [],
          total: 0,
          name: "",
          params: {
            page: 1,
            rows: 10
          },
          loading: true,
          status: 'loadmore',
        },
        // 输入框
        inputVal: "",
        // 0：评价资讯； 1：回复某个评价
        commentType: '0',
        // 回复某个评价的id
        pid: "",
        // 默认头像
        defaultImg: require("@/static/img/person/head.png"),
        scrollApply: null,
			};
		},
    created() {
      this.informationId = this.id;
      this.getCommentListFn();
    },
    mounted() {},
		methods: {
      // 区域滚动
      scrollFn() {
        if(this.scrollApply != null){
          clearTimeout(this.scrollApply);
        }
        this.scrollApply = setTimeout(()=>{
          this.applyOnBottomFn();
        }, 200)
      },

      // 获取评论列表
      async getCommentListFn() {
        let data = {
          informationId: this.informationId,
          page: this.params.page,
          rows: this.params.rows
        }
        let res = await API.getCommentListApi(data);
        if (res.code === 200) {
          this.list = [...this.list, ...res.result.rows];
          if(this.list.length >= (res.result.total * 1)) {
            this.status = 'nomore'
          } else {
            this.status = 'loading';
          }
        }
        this.loading = false;
      },
      // 获取回复列表
      async getCommentBackListFn() {
        let data = {
          commentId: this.apply.commentId,
          page: this.apply.params.page,
          rows: this.apply.params.rows,
        }
        let res = await API.getCommentBackListApi(data);
        if (res.code === 200) {
          this.apply.total = res.result.total;
          this.apply.list = [...this.apply.list, ...res.result.rows];
          if(this.apply.list.length >= (res.result.total * 1)) {
            this.apply.status = 'nomore'
          } else {
            this.apply.status = 'loading';
          }
        }
        this.apply.loading = false;
      },
      // 发布 与 回复
      async submitCommentFn() {
        let data = {
          commentType: this.commentType,
          details: this.inputVal,
          informationId: this.informationId
        }
        // 回复
        if(this.commentType === '1') {
          data.pid = this.pid;
        }

        let res = await API.postInformationApi(data);
        if(res.code === 200) {
          let title = "评价成功！";
          // 清空数据，刷新列表
          this.inputVal = "";
          // 回复结束
          if (this.commentType === '1') {
            title = "回复成功！";
            // 刷新列表
            this.apply.list = [];
            this.getCommentBackListFn();
          } else {
            this.list = [];
            this.getCommentListFn();
          }

          this.$refs.uToast.show({ title: title, type: 'success', icon: true })
        } else {
          this.$refs.uToast.show({ title: res.message })
        }
      },
      // 回复框
      async commentsApplyFn(item, type) {
        this.commentType = type;
        // 回复某个评价的id
        this.pid = item.id;
        this.apply.list = [];
        this.apply.commentId = item.id;
        this.apply.params.page = 1;
        this.apply.name = item.createByName;
        this.getCommentBackListFn();
        this.apply.isShow = true;
        // 返回一个 是否下拉 回复列表的参数给夫组件
        this.$emit('applyBottomFn', true)
      },
      // 关闭回复框
      applyCloseFn() {
        this.commentType = '0';
        this.apply.params.page = 1;
        // 返回一个 是否下拉 回复列表的参数给夫组件
        this.$emit('applyBottomFn', false)
        this.apply.isShow = false;
      },
      // 点赞
      async clickLikeFn(id) {
        let res = await API.getClickLikeApi(id);
        if (res.code === 200) {
          this.$refs.uToast.show({ title: "赞", type: 'success', icon: false })
        } else {
        	this.$refs.uToast.show({ title: res.message })
        }
      },
      // 上拉加载
      listOnBottomFn() {
        if (this.status !== 'nomore') {
          this.status = 'loading';
          this.params.page++;
          this.getCommentListFn();
        }
      },
      applyOnBottomFn() {
        if (this.apply.status !== 'nomore') {
          this.apply.status = 'loading';
          this.apply.params.page++;
          this.getCommentBackListFn();
        }
      },
		}
	};
</script>

<style lang="scss" scoped>
	@import "./comment.scss";
	.view-more{
		margin-bottom: 120rpx;
	}
  .name-date,
  .apply-modal .published .userInformation .information {
    flex: 1;
  }
  .comments-row .comments-msg {
    margin-top: 0;
  }
  .apply-footer .course-comments .comments-input {
    width: 510rpx;
  }
  
  .aaa .u-drawer-center {
    top: 240rpx;
    background-color: #cdcdcd;
  }
</style>
